<template>
  <view>
    <u-navbar :is-back="false" title-color="white" :border-bottom="false" :background="background" title-size="34"></u-navbar>

    <view class="uni-container">
      <view class="search-container">
        <view class="uni-search">
          <u-button plain="true" shape="circle" :ripple="true" class="hangdle-say" size="mini" @click="tohand">操作指导</u-button>
          <view style="padding-left: 120rpx; padding-top: 10rpx">周线数据选股</view>
        </view>
      </view>
      <view class="bottom-wrapper">
        <scroll-view
          scroll-y="true"
          :refresher-threshold="45"
          @refresherrefresh="refresherrefreshFun"
          :refresher-triggered="isRefresher"
          refresher-enabled="true"
        >
          <uni-table
            ref="table"
            filter-type="search"
            border
            emptyText="上证指数下跌概率大于75%，风险比较大，不推荐股票，建议空仓宁可错过不可冒险"
          >
            <!-- 表头行 -->
            <view class="table_head">
              <uni-tr class="head-table">
                <uni-th width="200rpx" align="center">
                  <view class="head-table t1"> 收盘日期</view>
                </uni-th>
                <uni-th width="100rpx" align="center">
                  <view class="head-table t1"> 股票代码</view>
                </uni-th>
                <uni-th width="150rpx" align="center">
                  <view class="head-table t1"> 股票名称</view>
                </uni-th>
                <uni-th width="130rpx" align="center">
                  <view class="head-table t2"> 下周上涨概率</view>
                </uni-th>
                <uni-th width="120rpx" align="center">
                  <view class="head-table t1"> 周线数据</view>
                </uni-th>
              </uni-tr>
            </view>
            <!-- 表格数据行 -->
            <view class="table_body" :style="cpuheight">
              <uni-tr v-for="(item, index) in tableData" :ref="'table' + index" :key="index">
                <uni-td align="center">
                  <view class="row-table150" :style="theight"> {{ item.date }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table80">{{ item.code }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table110">{{ item.name }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table80 red"> {{ getvalue(item) }}</view>
                </uni-td>
                <uni-td align="center">
                  <view>
                    <u-button plain="true" shape="circle" :ripple="true" size="mini" @click="clickTodeatil(item)">查看详情</u-button>
                  </view>
                </uni-td>
              </uni-tr>
            </view>
          </uni-table>
          <!-- <view
            v-if="!vuex_vip.type || vuex_vip.type * 1 < 2"
            style="width: 98%; text-align: center; padding-bottom: 20rpx"
            class="u-font-12 u-tips-color"
            >开通黄金会员解锁10只股票
          </view> -->
        </scroll-view>
        <view v-if="tableData.length > 0" class="below-s">{{ remark }}</view>
        <outher v-model="showPop" @sucess="refresherrefreshFun"></outher>
      </view>
    </view>
  </view>
</template>

<script>
import ChoiceSelected from '../../components/choice-selected.vue'
import { suggest } from 'api/findData.js'
import { mapState } from 'vuex'
import { getVip } from 'api/vip.js'
import { membershipLevels } from '../center/utils'
import outher from '../login/outher.vue'
export default {
  name: 'WeekChoose',
  components: {
    outher,
    ChoiceSelected
  },
  data() {
    return {
      showPop: false,
      isRefresher: false, // 下拉刷新
      remark: '备注:L表示上涨，S表示下跌',
      tableData: [],
      background: {
        // 导航栏背景图
        backgroundImage: 'linear-gradient(to  right, #3ad1ff, #0055ff)'
      }
    }
  },
  onShow() {
    this.getData()
    this.getuserVip()
  },
  created() {
    this.getData()
  },
  computed: {
    ...mapState(['vuex_num', 'vuex_vip', 'vuex_token']),
    cpuheight() {
      const h = this.tableData.length * 42 + 20
      return `height:${h}px;`
    },
    theight() {
      const h = this.safeAreaHeight - 95 - 120 - 30 - 240
      const th = h / 11
      return `height:${th}px;line-height:${th}px;`
    }
  },
  methods: {
    async getuserVip() {
      const { data } = await getVip()
      if (data.userVip) {
        const ele = data.userVip
        const obj = membershipLevels.find(o => o.type == ele.type)
        this.$u.vuex('vuex_vip', { ...obj, ...ele })
      }
    },
    async refresherrefreshFun() {
      console.log('触发下拉刷新了')
      this.isRefresher = true
      await this.getData()
      // 停止下拉刷新效果
      this.isRefresher = false
    },
    getvalue(item) {
      return item.up * 100 + '%'
    },
    clickTodeatil(item) {
      if (!this.vuex_token) {
        this.showPop = true
        return
      }
      this.$u.vuex('vuex_num', item.code)
      uni.switchTab({
        url: '/pages/week/index'
      })
    },
    /**
     * @desc: 能量值格式化
     * @author: majun
     * @param {*} val
     */
    getNext(val) {
      if (val > 999) {
        return Math.round(val)
      } else return val
    },
    /**
     * @desc: 获取数据
     * @author: majun
     * @param {*} id
     */
    async getData() {
      try {
        const { data } = await suggest('')
        const { remark, data: datas } = data
        this.tableData = datas || []
        this.remark = remark

        datas.forEach(el => {
          el.color = '#ffff00'
        })
      } catch (error) {}
    },
    /**
     * @desc: 下拉选择后
     * @author: majun
     */
    selectClick() {
      this.showSelect = false
    },
    /**
     * @desc:操作查看
     * @author: majun
     */
    tohand() {
      console.log('调转图片')
      this.$u.route('/pages/guidance')
    },
    share() {}
  }
}
</script>

<style lang="scss">
.top-tittle {
  width: 100%;
  font-size: 18px;
  margin-left: 75rpx;
}

.bgl {
  background: #ffff00;
}

.fontc {
  color: #ffff00 !important;
}

/* 表格标题固定定位 */
.table_head {
  position: absolute;
  top: 0;
  left: 0;
}

.table_body {
  margin-top: 120rpx;
  overflow: auto;
}

.row-table150 {
  width: 150rpx;
}

.row-table90 {
  width: 90rpx;
}

.row-table100 {
  width: 100rpx;
}

.row-table80 {
  width: 80rpx;
}

.row-table110 {
  width: 110rpx;
}

.uni-table-td {
  font-size: 24rpx !important;
  color: #b4b4b4 !important;
  padding: 8px 8px !important;
}

.hangdle-say {
  padding-top: 2rpx;
  padding-right: 10rpx;

  .u-btn--default {
    color: #fff !important;
  }

  .u-size-mini {
    width: 148rpx !important;
    height: 62rpx !important;
    line-height: 62rpx !important;
    font-size: 28rpx !important;
    background: linear-gradient(to right, #3ad1ff, #0055ff);
  }
}

.uni-search {
  padding-top: 10rpx;
  font-size: 18px;
  background-color: #fafafa;
  display: flex;
  // justify-content: center;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  padding: 20rpx 32rpx 20rpx 22rpx;
}

.search {
  flex: 1;
}

// 表头文字大小
.head-table {
  font-size: 24rpx;
}

.red {
  color: red !important;
}

.green {
  color: #1bca7e;
}

// 表头颜色
.uni-table-th {
  color: #616161 !important;
}

.table--border {
  border-right: 1px #fff solid !important;
}

.below-s {
  position: absolute;
  bottom: 14rpx;
  font-size: 24rpx;
  text-align: left;
  margin-top: 4px;
  padding-top: 10rpx;
  color: rgb(168, 166, 166);
  background: #f4f5f7;
}

.uni-group {
  display: flex;
  align-items: center;
}

.bottom-wrapper {
  text-align: center;
  padding: 0 10rpx;
}

.u-close-wrap {
  .u-icon__icon {
    font-size: 22px !important;
  }
}

.t1 {
  margin: 0 auto;
  width: 60rpx;
}

.t2 {
  margin: 0 auto;
  width: 80rpx;
}

.u-action-active {
  width: 90rpx !important;
}

.search-container {
  background: linear-gradient(to right, #3ad1ff, #0055ff);
}

.empty-border {
  font-size: 30rpx !important;
  top: 400rpx !important;
  left: 87rpx !important;
  border-right: 0px !important;
  width: 570rpx;
}
</style>
